import React, { Component, useEffect, useRef, useState } from 'react'
import { Button, Space, Swiper, Toast, Tabs } from 'antd-mobile'
import { SwiperRef } from 'antd-mobile/es/components/swiper'
import { AaOutline } from 'antd-mobile-icons'
import styles from './cart.module.css'
import withRouter from '../../utils/withRouter'

const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']

const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      className={styles.content}
      style={{ background: color }}
      onClick={() => {
        Toast.show(`你点击了卡片 ${index + 1}`)
      }}
    >
      {index + 1}
    </div>
  </Swiper.Item>
))
const Cart = () => {
  const ref = useRef(null)
  const handler = useRef()
  return (
    <>
      <AaOutline />
      <div style={{ height: 200 }}>
        <Swiper>{items}</Swiper>
      </div>
      <Button
        onClick={
          () =>
            Toast.show({
              icon: 'success',
              content: '保存成功',
            })
          // Toast.show({
          //   content: 'Hello World',
          //   afterClose: () => {
          //     console.log('after')
          //   },
          // })
        }
      >
        轻提示
      </Button>
      <Tabs
        onChange={(key) => {
          console.log(key, 'key')
        }}
      >
        <Tabs.Tab title="水果" key="0">
          菠萝
        </Tabs.Tab>
        <Tabs.Tab title="蔬菜" key="1">
          西红柿
        </Tabs.Tab>
        <Tabs.Tab title="动物" key="2">
          蚂蚁
        </Tabs.Tab>
      </Tabs>
    </>
  )
}

export default withRouter(Cart)
